<template>
    <div class="container">
        <div class="headTitle">
            <div class="icons" @click="backTo">
                <span class="iconfont">&#xe799;</span>
            </div>
            <div class="titles">优惠码</div>
            <div class="introduction"></div>
        </div>
        <div class="asks">
            <a href="https://www.baidu.com">
                <span class="iconfont">&#xe62e;</span>
                <span>兑换规则</span>
            </a>
        </div>
        <div class="codeInput">
           <label>
               <input type="text" @input="changeColor" placeholder="如果您有优惠码，请输入或粘贴" v-model="inputContent">
           </label>
        </div>
        <div class="exchange">
            <button :class="{'toChangeColor':isShow}">兑换</button>
        </div>
        <div class="telling">
            <ul>
                <li>
                    <span class="tells">优惠码由快递员或者菜鸟包裹发放</span>
                </li>
                <li>
                    <span class="tells">优惠码兑换的寄件优惠券、包邮卡仅限在菜鸟裹裹在线寄件使用，并且权限仅在线寄件开通城市</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "saleCode",
    data(){
        return{
            content:'如果您有优惠码，请输入或粘贴',
            isShow:false,
            inputContent:''
        }
    },
    methods:{
        backTo(){
            this.$router.go(-1);
        },
        changeColor(){
            if(this.inputContent===''){
                this.isShow=false;
            }
            else{
                this.isShow=true;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/*引入图标*/
@import url("../../../../assets/userIconFont/iconfont.css");
    .headTitle{
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        margin-bottom: 5px;
        .icons{
            span{
                font-size: 40px;
                color: #8590a6;
            }
        }
        .titles{
            font-size: 35px;
        }
        .introduction{
            font-size: 30px;
        }
    }
    .asks{
        float: right;
        margin: 20px;
        display: flex;
        align-items: center;
        span:nth-child(1){
            color: #cccccc;
            font-size: 40px;
        }
        span:nth-child(2){
            color: #cccccc;
            font-size: 30px;
        }
    }
    .codeInput{
        text-align: center;
        clear: both;
        border: none;
        margin-bottom: 20px;
        input{
            background-color: #f6f6f6;
            border: none;
            width: 90%;
            padding: 20px;
            font-size: 40px;
            text-align: center;
        }
    }
    .exchange{
        text-align: center;
        button{
            width: 95%;
            padding: 10px 20px;
            font-size: 40px;
            font-weight: bold;
            color: white;
            background-color: #d1d1d1;
            outline-style: none;
            border: none;
            border-radius: 10px;
        }
        .toChangeColor{
            background-color: #ffa000;
        }
    }
    .telling{
        padding: 20px;
        ul{
            list-style: inside;
            color: #8f8e92;
        }
    }
</style>